<template>
  <el-card shadow="hover" class="report-download-card">
    <div class="title">报表下载</div>
    <el-row :gutter="24" class="download-btn-row">
      <el-col :span="8">
        <el-button type="primary" :loading="loading1" @click="downloadTransferProcessReport">
          项目交底流程报表
        </el-button>
      </el-col>
      <el-col :span="8">
        <el-button type="primary" :loading="loading2" @click="downloadOnSaleInfoReport">
          项目售中信息报表
        </el-button>
      </el-col>
      <el-col :span="8">
        <el-button type="primary" :loading="loading3" @click="downloadDeliveryProcessReport">
          项目交付流程报表
        </el-button>
      </el-col>
    </el-row>
  </el-card>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import {
  getTransferProcessReportForm,
  getOnSaleInfoReportForm,
  getDeliveryProcessReportForm
} from '@/api/project/ict'
import download from '@/utils/download'
import { ElMessage } from 'element-plus'

function getNowStr() {
  const d = new Date()
  const pad = (n) => n.toString().padStart(2, '0')
  return (
    d.getFullYear().toString() +
    pad(d.getMonth() + 1) +
    pad(d.getDate()) +
    '_' +
    pad(d.getHours()) +
    pad(d.getMinutes()) +
    pad(d.getSeconds())
  )
}

const loading1 = ref(false)
const loading2 = ref(false)
const loading3 = ref(false)

// 通用报表下载方法
async function downloadReport(apiFn, loadingRef, baseName) {
  loadingRef.value = true
  try {
    const res = await apiFn({})
    const now = getNowStr()
    download.excel(res, `${baseName}_${now}.xlsx`)
    ElMessage.success('下载成功')
  } catch (e) {
    ElMessage.error('下载失败')
  } finally {
    loadingRef.value = false
  }
}

const downloadTransferProcessReport = () =>
  downloadReport(getTransferProcessReportForm, loading1, '项目交底流程报表')
const downloadOnSaleInfoReport = () =>
  downloadReport(getOnSaleInfoReportForm, loading2, '项目售中信息报表')
const downloadDeliveryProcessReport = () =>
  downloadReport(getDeliveryProcessReportForm, loading3, '项目交付流程报表')
</script>

<style scoped>
.report-download-card {
  max-width: 600px;
  margin: 40px auto;
  padding: 40px 30px 30px 30px;
  border-radius: 12px;
  background: #fff;
}
.title {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 32px;
  color: #222;
  text-align: center;
}
.download-btn-row {
  margin-top: 10px;
  justify-content: center;
}
.el-button {
  width: 100%;
  font-size: 16px;
  padding: 16px 0;
}
</style>
